<template>
    <div>
        <el-button @click="dialogVisible = true" type="primary">申请社保转移申请</el-button>
          <el-table :data="personList" style="width: 100%;">
              <el-table-column fixed prop="name" label="姓名" width="150" />
              <el-table-column prop="age" label="年龄" width="150" />
              <el-table-column prop="idNumber" label="身份证号码" width="240" />
              <el-table-column prop="employeeAddress" label="员工地址" width="240" />
              <el-table-column prop="paymentBase" label="缴费基数" width="150" />
              <el-table-column prop="personalBalance" label="账户余额" width="150" />
              <el-table-column prop="employer" label="雇主" width="150" />
              <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="seePassword(scope)"
                  >
                    查看密码
                  </el-button>
                </template>
              </el-table-column>
              <!-- <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="dialogVisible4Info(scope)">缴纳</el-button>
              
               </template>
              </el-table-column> -->
          </el-table>
          <!-- 申请社保转移申请 -->
          <el-dialog style="width: 700px;" title="申请信息" v-model="dialogVisible">
              <el-form label-width="150px" ref="applicentDetail.value" style="margin: 0 auto">
                <el-form-item label-width="40%" label="申请人地址:">
                  <el-input style="width: 300px" v-model="applicentDetail.applicant"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="当前社保局地址:">
                  <el-input style="width: 300px" v-model="applicentDetail.currentBureauAddress"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="当前城市:">
                  <!-- <el-input v-model="applicentDetail.fromCity"></el-input> -->
                  <el-select style="width: 300px" v-model="applicentDetail.fromCity" placeholder="请选择转出省份">
                    <el-option v-for="item in provinces" :label="item.name" :value="item.name"
                      :key="item.code"></el-option>

                  </el-select>
                </el-form-item>
                <el-form-item label-width="40%" label="转入社保局地址:">
                  <el-input style="width: 300px" v-model="applicentDetail.toBureauAddress"></el-input>
                </el-form-item>
                <el-form-item label-width="40%" label="转入城市:">
                  <el-select style="width: 300px" v-model="applicentDetail.toCity" placeholder="请选择转入省份">
                    <el-option v-for="item in provinces" :label="item.name" :value="item.name"
                      :key="item.code"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label-width="40%" >
                  <el-button type="primary" @click="onSubmit(applicentDetail)">立即创建</el-button>
                  <el-button style="margin-left: 150px;" @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
          </el-dialog>
          <!-- 个人账户充值弹窗 -->
          <el-dialog style="width: 700px;" title="购买保险" v-model="dialogVisible4">
              <el-form label-width="150px" ref="personDetail.value" style="margin: 0 auto">
                <el-form-item label-width="40%" label="员工地址:">
                  <el-input style="width: 300px" v-model="personDetail.address"></el-input>
                </el-form-item>
                <!-- <el-form-item label-width="40%" label="充值金额:">
                  <el-input style="width: 300px" v-model.number="personDetail.amount"></el-input>
                </el-form-item> -->
                <el-form-item label-width="40%" >
                  <el-button type="primary" @click="SubmitDepositEmployee()">提交</el-button>
                  <el-button style="margin-left: 150px;" @click="closeDialog">取消</el-button>
                </el-form-item>
              </el-form>
          
            </el-dialog>
          <!-- 查看密码的弹窗 -->
          <el-dialog
            v-model="dialogVisible2"
            title="账号密码信息"
            width="500"
            :before-close="handleClose"
          >
          <!-- <div>账号是：{{ employeeAddress }}</div> -->
          <div>密码是：{{ security }}</div>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible2 = false">
                  已记住
                </el-button>
              </div>
            </template>
          </el-dialog>
    </div>
</template>

<script setup>
import myAxios from "../../plugins/myAxios.js";
import { onMounted } from 'vue';
import { ref } from 'vue';
import { ElNotification } from 'element-plus'


// 转入城市
const provinces = [
        { name: "北京市", code: "110000" },
        { name: "天津市", code: "120000" },
        { name: "河北省", code: "130000" },
        { name: "山西省", code: "140000" },
        { name: "内蒙古自治区", code: "150000" },
        { name: "辽宁省", code: "210000" },
        { name: "吉林省", code: "220000" },
        { name: "黑龙江省", code: "230000" },
        { name: "上海市", code: "310000" },
        { name: "江苏省", code: "320000" },
        { name: "浙江省", code: "330000" },
        { name: "安徽省", code: "340000" },
        { name: "福建省", code: "350000" },
        { name: "江西省", code: "360000" },
        { name: "山东省", code: "370000" },
        { name: "河南省", code: "410000" },
        { name: "湖北省", code: "420000" },
        { name: "湖南省", code: "430000" },
        { name: "广东省", code: "440000" },
        { name: "广西壮族自治区", code: "450000" },
        { name: "海南省", code: "460000" },
        { name: "重庆市", code: "500000" },
        { name: "四川省", code: "510000" },
        { name: "贵州省", code: "520000" },
        { name: "云南省", code: "530000" },
        { name: "西藏自治区", code: "540000" },
        { name: "陕西省", code: "610000" },
        { name: "甘肃省", code: "620000" },
        { name: "青海省", code: "630000" },
        { name: "宁夏回族自治区", code: "640000" },
        { name: "新疆维吾尔自治区", code: "650000" },
        { name: "台湾省", code: "710000" },
        { name: "香港特别行政区", code: "810000" },
        { name: "澳门特别行政区", code: "820000" },
      ]
const personList = ref([])

const dialogVisible = ref(false)
const dialogVisible2 = ref(false);
const dialogVisible4 = ref(false);
//当前人的地址
const currentAddress = ref('')
const security = ref('')
const applicentDetail = ref({
  applicant: localStorage.getItem('senderAddress'), // 申请人地址
  currentBureauAddress: '', //申请人当前社保局地址
  fromCity: '', // 原城市
  toCity: '', // 目标城市
  toBureauAddress: '',
  isStopped: null, // 是否停缴  true === 停止缴费
  isApproved: null, // 是否批准
})
// 充值信息
const personDetail = ref({
        name: "",
        age: null,
        user_type: "",
        address: "",
        idNumber: "",
        personCompany: "",
        startDate: "",
        salary: null,
        paymentBase: null,
})
// 给员工充值接口
const SubmitDepositEmployee = () =>{
  let postData = {
    salary: personDetail.value.salary,
    address: personDetail.value.address,
    senderAddress: localStorage.getItem('senderAddress'),
    sponsorAddress: localStorage.getItem('senderAddress')
  }
  myAxios.post('/user/makePayment',postData)
  .then((res) => {
    if(res.data.code === 200) {
      ElNotification({
          title: '成功',
          message: '购买成功',
          type: 'success',
        })
      closeDialog()
      query()
    }else {
      alert(`请求内容有误,${res.data.msg}`);
    }
  })
}

const query = () => {
  console.log(localStorage.getItem('senderAddress'))
  myAxios.post("/query/list", {userAddress: localStorage.getItem('senderAddress')})
  .then((res) => {
    if (res.data.code === 200) {
      personList.value = res.data.data;
      // cookies.set('companyList', JSON.stringify(companyList.value))
    } else {
      alert(`请求失败：${res.data.msg}`);
    }
  })
  .catch((error) => {
      alert(`请求失败：${error || '未知错误'}`);
    });
}
// 提交输入框内
const onSubmit = (from) => {
  console.log(111, from);
  let postData = {
        senderAddress: localStorage.getItem('senderAddress'),
        fromCity: from.fromCity,
        toCity: from.toCity,
        applicant: from.applicant,
        currentBureauAddress: from.currentBureauAddress,
        toBureauAddress: from.toBureauAddress
  }
  myAxios.post('/employee/applyForTransfer',postData)
  .then((res) => {
    if (res.data.code == 200) {
      alert("添加申请成功！")
      closeDialog()
      query()
    }else {
      alert(`请求内容有误, ${res.data.msg}`);
    }
  })
}
// 查看密码
const seePassword = (row) => {
  console.log(row.row.name)
  dialogVisible2.value = true
  currentAddress.value = row.row.employeeAddress
  security.value = row.row.security
 // 完成赋值
}

// 关闭输入框
const closeDialog = () => {
  applicentDetail.value.applicant = ""
  applicentDetail.value.currentBureauAddress = null
  applicentDetail.value.fromCity = ""
  applicentDetail.value.toCity = ""
  applicentDetail.value.isStopped = null
  applicentDetail.value.isApproved = null
  applicentDetail.value.toBureauAddress = ""
  dialogVisible.value = false
}


// 给员工充值接口 回显
const dialogVisible4Info = (row) => {
  console.log(row.row.employeeAddress)
  dialogVisible4.value = true
  personDetail.value.address = row.row.employeeAddress
  personDetail.value.salary = row.row.salary
  console.log(currentEmployeeAddress.value)
};

onMounted(() => {
  query()
})
</script>

<style scoped>
.form-item-center .el-form-item__content {
  display: flex;
  align-items: center;
}

</style>